<template>
	<div>
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="username" name="username" label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					提交
				</van-button>
			</div>
		</van-form>

	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios'
import { Notify } from 'vant'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const username = ref('');
const password = ref('');
const store = useStore()
const router = useRouter()
const onSubmit = async (values) => {
	const resp = await axios.post('/api/login', values);
	const { data, message, code } = resp.data;
	if (code === 200) {
		store.commit('user/setUser', { ...data, isLogin: true })
		Notify({
			type: 'success',
			message: '登录成功， 欢迎用户：' + data.nickname,
			onClose() {
				router.back()
			}
		})
	} else {
		Notify({ type: 'danger', message })
	}
};

</script>